
<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
		    <div class="hei10"></div>
          <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
            当前位置：
            <router-link to="/index" style="color: #409eff;">分销后台</router-link>>
            <router-link to="/myshop" style="color: #409eff;">我的账户</router-link>>
            充值记录
          </div>

          <div class="hei10"></div>

        <div class="title">充值记录</div>
        <div class="kflexbc" style="padding: 20px 40px;">
          <div>
            <el-date-picker style="width: 470px;" v-model="time" @change="timechange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="——" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker>
            <el-button type="danger" round style="margin-left: 20px;" @click="sousuo">查询</el-button>
            <el-button type="danger" round  @click="daochu">导出充值记录</el-button>

            <el-button type="primary" round plain @click="goid('/order_export4')">查看导出充值记录</el-button>
          </div>
          <div style="text-align: right; color: #909399;">合计金额：{{ allmoney }}</div>
        </div>

        <div style="padding:0 40px;">
          <el-table
          :header-cell-style="{
      background:'#F9F9F9'}"
            :data="list"
            v-loading="loading"
            border
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="id"
              align="center"
              label="充值ID">
            </el-table-column>
            <el-table-column
              prop="created_at"
              align="center"
              label="充值时间">
            </el-table-column>
            <el-table-column
              prop="address"
              align="center"
              label="充值方式">
              <template slot-scope="scope">
                <span v-if="scope.row.xianxia== 1" >线下支付</span>
                <span v-if="scope.row.xianxia== 2" >微信</span>
                <span v-if="scope.row.xianxia== 3" >支付宝</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="product_sku"
              align="center"
              label="充值金额">
            </el-table-column>
          </el-table>
        </div>

        <!-- <div class="con" v-loading="loading">
          <div class="list">
            <div class="th">充值ID</div>
            <div class="th">充值时间</div>
            <div class="th">充值方式</div>
            <div class="th">充值金额</div> -->
            <!-- <div class="th">充值功能</div> -->
          <!-- </div>
          <div class="list" v-for="item in list" :key="item.id">
            <div class="td">{{item.id}}</div>
            <div class="td">{{item.created_at}}</div>
            <div class="td" v-if="item.xianxia != 1">微信</div>
			      <div class="td" v-if="item.xianxia == 1">线下支付</div>
            <div class="td">{{item.product_sku}}</div> -->
            <!-- <div class="th" v-if="item.type == 0">充值</div>
            <div class="th" v-if="item.type == 1">充值短信</div> -->
          <!-- </div> -->
          <!-- <div> -->
          <div class="con" >
            <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye"
              :page-size="pagesize" :total="total"></el-pagination>
          </div>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>

</template>

<script>

  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: "recharge",
    data() {
      return {
        pagesize: 20,
        total: 0,
        page: 1,
        list: [],
        loading: true,
        allmoney:0,
        all:{
          status:100,
          start:"",
          end:"",
          page:1
        },
        time:[]
      }
    },
    created() {

      this.getlist()

    },
    mounted() {

    },
    methods: {
      timechange:function(val){
        if(val == null){
          this.all.start = ''
          this.all.end = ''
        }else{
          this.all.start = val[0]
          this.all.end = val[1]
        }
      },
      handleSelectionChange(val){
        console.log('多选')
        console.log(val)
        this.allmoney = 0
        for(var x = 0;x<val.length;x++){
          this.allmoney =this.addNum(this.allmoney, val[x].total*1)
        }
      },
      //自定义加法运算
      addNum(arg1, arg2) {
        var r1, r2, m, c;
        try {
          r1 = arg1.toString().split(".")[1].length;
        } catch (e) {
          r1 = 0;
        }
        try {
          r2 = arg2.toString().split(".")[1].length;
        } catch (e) {
          r2 = 0;
        }
        c = Math.abs(r1 - r2);
        m = Math.pow(10, Math.max(r1, r2));
        if (c > 0) {
          var cm = Math.pow(10, c);
          if (r1 > r2) {
            arg1 = Number(arg1.toString().replace(".", ""));
            arg2 = Number(arg2.toString().replace(".", "")) * cm;
          } else {
            arg1 = Number(arg1.toString().replace(".", "")) * cm;
            arg2 = Number(arg2.toString().replace(".", ""));
          }
        } else {
          arg1 = Number(arg1.toString().replace(".", ""));
          arg2 = Number(arg2.toString().replace(".", ""));
        }
        return (arg1 + arg2) / m;
      },
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },
      sousuo:function(){
        this.all.page = 1
        this.getlist()
      },
      getlist: function() {
        axios.get('/api/plan-market/shop/recharge/order',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
              this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daochu:function(){
        axios.get('/api/plan-market/shop/recharge/order/export',{params:this.all})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$router.push('/order_export5')
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .index {

      /deep/ .el-button--danger {
          color: #FFF;
          background-color: #2974FF;
          border-color: #2974FF;
      }


        .title {
          border-bottom: 1px #EAEAEA solid;
          line-height: 45px;
          padding-left: 30px;
          font-size: 16px;
          background: #F9F9F9;
          color: #727272
        }


      .con {
        padding: 20px;

        .list {
          display: flex;
          text-align: center;
          color: #727272;
          line-height: 45px;
          margin: 0 20px;
          border: 1px #EAEAEA solid;
          margin-top: -1px;

          .th {
            flex: 1;
            background: #F9F9F9;
            font-size: 14px;
            border-right: 1px #EAEAEA solid;
          }

          .td {
            flex: 1;
            font-size: 14px;
            border-right: 1px #EAEAEA solid;
          }
        }

        .el-pagination {
          text-align: right;
          margin: 20px 0;
        }
      }


  }
</style>
